<template>
  <div>
    <admin-container>
      <template v-slot:content>

        <table-plugin
            :page="page"
            :config="tableConfig"
            :part-operate="partOperate"
            :search-operate="searchOperate"
            @search="searchOperateActuator"
            @part="partOperateActuator"
        />
      </template>
    </admin-container>
    <el-dialog
        title="博文审核"
        :visible.sync="dialog"
        center
        @close="$refs['blogRef'].resetFields()"
    >
      <el-form label-width="80px" :model="blog" ref="blogRef" :rules="rules">
        <el-form-item label="标题">
          <el-input v-model="blog.title" disabled style="width: 100%;"/>
        </el-form-item>
        <el-form-item label="作者">
          <el-input type="text" v-model="blog.authorName" disabled/>
        </el-form-item>
        <!-- <el-form-item label="内容" class="deep-textarea">
            <el-input type="textarea" v-model="blog.content" autosize disabled />
        </el-form-item> -->
        <el-form-item label="审核" prop="examine">
          <el-select v-model="blog.examine" placeholder="请选择" @change="changeSelectOption">
            <el-option
                :label="item.value"
                :value="item.key"
                v-for="(item,index) in blogStatusList"
                :key="index"
                :disabled="blog.status == item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见" v-if="blog.examine==2" class="deep-opinion-textarea">
          <el-input type="textarea" autosize v-model="blog.opinion"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="examineBlog">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 竞赛内容预览 -->
    <el-dialog
        :title="previewDialog.title"
        :visible.sync="previewDialog.flag"
        width="80%"
        @close="previewDialog.content = ''"
        @open="openHandler"
    >
      <div class="editor-content-view" v-html="previewDialog.content">

      </div>


    </el-dialog>

  </div>
</template>

<script>
import AdminContainer from '@/components/plugs/admin-container/AdminContainer.vue'
import TablePlugin from '@/components/plugs/table-plugin/TablePlugin.vue'
import {post, get} from '@/utils/api'
import Prism from 'prismjs';
import '@/assets/css/html.css'
import 'prismjs/themes/prism.css';

export default {
  data() {
    return {
      previewDialog: {
        title: '',
        flag: false,
        content: ''
      },
      dialog: false,
      page: {},
      blogStatusList: [],
      blog: {},
      rules: {
        examine: [{required: true, message: '审核项不能未空', trigger: 'blur'}]
      },
      tableConfig: {
        columns: [
          {
            fixed: false,
            prop: 'id',
            label: '博文编号',
            width: '150',
          },
          {
            fixed: false,
            prop: 'title',
            label: '标题',
            width: '150',
          },
          {
            fixed: false,
            prop: 'authorName',
            label: '作者',
            width: '150',
          },
          // {
          //     fixed:false,
          //     prop:'content',
          //     label:'内容',
          //     width:'350',
          // },
          {
            fixed: false,
            prop: 'statusName',
            label: '状态',
            width: '150',
          },
          {
            fixed: false,
            prop: 'opinion',
            label: '审核意见',
            width: '150',
          }

        ]
      },
      partOperate: [
        {type: 'preview', text: '预览', level: 'text', color: ''},
        {type: 'examine', text: '审核', level: 'text', color: ''},
      ],
      searchOperate: {
        entity: {},
        condition: [
          {label: '标题', prompt: '查询博文标题(模糊查询)', type: 'input', width: '300px', name: 'title'}

        ]
      }

    }
  },
  methods: {
    getPage() {
      const promise = get({
        url: '/base-blog/back/blog/page',
        params: {current: this.page.current, size: this.page.size, title: this.searchOperate.entity.title}
      });
      // console.log('promise',promise);
      promise.then(res => {
        if (res.code === 200) {
          this.page = res.data;
        }
      })
    },
    changeSelectOption(env) {
      // console.log(this.blog.examine)
      // console.log('select',env);
    },
    examineBlog() {
      this.$refs['blogRef'].validate((valid) => {
        if (valid) {
          const promise = post({
            url: '/base-blog/back/blog/examine',
            data: {id: this.blog.id, status: this.blog.examine, opinion: this.blog.opinion}
          })
          promise.then(res => {
            if (res.code === 200) {
              this.$message.success(res.message);
              this.getPage();
              this.dialog = false;
              return;
            }
            this.$message.error(res.message);
          })
          return;
        } else {
          this.$message.error('数据校验不通过,请检查表单项~')
        }
      })
    },
    getBlogStatusList() {
      const promise = get({
        url: '/base-blog/back/blog/status'
      });
      console.log('r', promise)
      promise.then(res => {
        if (res.code = 200) {
          this.blogStatusList = res.data;
        }
      })
    },
    searchOperateActuator() {
      // console.log('搜索条件',this.searchOperate.entity);
      this.getPage();
    },
    partOperateActuator(index, row, operate) {
      switch (operate.type) {
        case 'examine':
          this.blog = row;
          this.dialog = true;
          break;
        case 'preview':
          this.previewBlogContent(row);
      }
    },
    previewBlogContent(row) {
      this.$nextTick(() => {
        Prism.highlightAll();
        this.previewDialog.content = row.content;
        console.log('content', this.previewDialog.content);
        this.previewDialog.flag = true;
        this.previewDialog.title = `预览:《${row.title}》的内容`;
      })
    },
    openHandler() {
      this.$nextTick(() => {
        Prism.highlightAll()
      })
    }

  },
  components: {
    AdminContainer,
    TablePlugin

  },
  created() {
    this.getPage();
    this.getBlogStatusList();
  }
}
</script>

<style scoped>
.deep-textarea >>> textarea {
  max-height: 120PX;
}

.deep-opinion-textarea >>> textarea {
  max-height: 50px
}

</style>